<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="./vue.js"></script>
    <title>计算属性与侦听器</title>
  </head>
  <body>
	<div id="root">
		姓：<input v-model:value="firstName" />
		<br />
		名：<input v-model:value="lastName" />
		<div>{{fullName}}</div>
		<div>{{count}}</div>
	</div>
	<script>
		new Vue({
			el: '#root',
			data: {
			  firstName: '',
			  lastName: '',
			  count: 0
			},
			computed: { // 计算属性
			  fullName :function() {
				return this.$data.firstName + ' ' + this.$data.lastName;
			  }
			},
			watch: {
			  // firstName: function() {
			  //   this.$data.count += 1;
			  // },
			  // lastName: function() {
			  //   this.$data.count += 1;
			  // }
			  fullName :function() {
				this.$data.count += 1;
			  }
			}
		})
	</script>
  </body>
</html>
